<template>
        <div class="yyzaigc">
            <h3>
                元宇宙AIGC
            </h3>
            <p>一部手机、无人机即可轻松实现实景三维建模</p>
            <div>
                <div class="taczzy">
                    <img src="https://www.jsvry.com/static/images/threejs-image/aigc/3D%E5%BB%BA%E6%A8%A1.png" alt="">
                    <p>3D建模</p>
                </div>
                <div class="taczzy">
                    <img src="https://www.jsvry.com/static/images/threejs-image/aigc/%E8%88%AA%E6%8B%8D%E5%BB%BA%E6%A8%A1.png" alt="">
                    <p>航拍建模</p>
                </div>
                <div class="taczzy">
                    <img src="https://www.jsvry.com/static/images/threejs-image/aigc/%E7%A9%BA%E9%97%B4%E5%BB%BA%E6%A8%A1.png" alt="">
                    <p>空间建模</p>
                </div>
            </div>
        </div>
</template>
    
<script setup>
    
</script>
    
<style scoped>
    .yyzaigc{
        width: 100%;
        height: 500px;
        background: #F5F5F5;
    }

    .yyzaigc>h3{
        text-align: center;
        font-size: 32px;
        line-height: 50px;
        padding-top: 25px;
    }

    .yyzaigc>p{
        text-align: center;
        color: #666;
        font-size: 14px;
        line-height: 50px;
        padding: 25px;
    }

    .yyzaigc>div{
        display: flex;
        width: 1300px;
        height: 320px;
        justify-content: space-around;
        margin: auto;
    }

    .yyzaigc>div>div>img{
        width: 300px;
        height: 300px;
        border-radius: 10px;
    }

    .taczzy{
        width: 300px;
        height: 300px;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 10px;
        overflow: hidden;
    }

    .taczzy>p{
        position: absolute;
        width: 100%;
        line-height: 50px;
        text-align: center;
        background: #00000086;
        font-size: 20px;
        color: #fff;
        left: 0;
        bottom: 0;
    }
</style>